<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px;background: #05265C; "></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value

    option = {
      legend: { // 图例组件不显示
        show: false
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      graphic: [{
        type: 'text',
        top: '40%',
        left: 'center',
        style: {
          text: '总共',
          fill: '#2A4572',
          fontSize: 16,
          fontWeight: 'normal'
        }
      }, {
        type: 'text',
        top: '48%',
        left: 'center',
        style: {
          text: '36',
          fill: 'white',
          fontSize: 30,
          fontWeight: 'bold'
        }
      }],

      series: [{
        name: '总数36',
        radius: ['40%', '70%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。
        type: 'pie',
        label: {
          color: "rgba(247, 243, 243, 1)",
            //显示的标签的内容a（系列名称），b（数据项名称），c（数值）, d（百分比）
            formatter: "{b}   {c}",
          
        },
        labelLine: {
          show: true, //是否显示引导线
          length: 20, //百分比引导线
          length2: 20 //视觉引导项第二段的长度。
        },
        data: [{
            value: 6,
            name: '线路故障'
          },
          {
            value: 9,
            name: '超时'
          },
          {
            value: 9,
            name: '故障'
          },
          {
            value: 5,
            name: '机器某率'
          },
          {
            value: 5,
            name: '抖动'
          }

        ]
      }],

    };
    
    mCharts.setOption(option)
  </script>
</body>

</html>